Dark Mode: How Users Think About It and Issues to Avoid深色模式：使用者如何看待它以及要避免的問題

最近一項調查顯示，在115名移動使用者中，約三分之一使用暗模式，三分之一使用亮模式，剩下的三分之一兩者兼用。使用者、設計師和開發者常提到的使用暗模式的理由包括：

A 減少眼睛疲勞

暗模式最常被認為可以減少眼睛疲勞，尤其在昏暗環境下。雖然研究未能證實暗模式顯著減少頭痛，但許多使用者相信它確實有助於緩解眼睛疲勞。研究表明，螢幕亮度和周圍環境的光線對眼睛疲勞的影響與顏色模式同樣重要。

B 節省電池

暗模式可以在使用OLED顯示屏的裝置上節省電池，尤其是在高亮度下。Purdue大學的研究表明，在100%亮度下，使用暗模式可以減少67%的功耗，但在30%亮度時，這一優勢僅為14%。

Apple Watch 上沒有可用的淺色模式是有道理的：它利用 OLED 顯示屏上的深色模式來儘可能節省電池，以度過一整天。

C 美學吸引力

許多使用者簡單地喜歡暗模式的外觀，認為它更現代、視覺上更具吸引力。

例如，Spotify等應用只提供暗模式，目的是突出視覺內容，同時讓介面元素不分散使用者注意力。

改善視覺障礙者的可訪問性。Spotify 負責這一設計選擇的人員將該應用程式的體驗與電影院進行了比較。他們強調，不太重要的 UI 元素可以淡入黑暗背景，以優先考慮彩色影象和專輯藝術 - 就像黑暗的劇院不會分散螢幕上電影的注意力一樣。

使用者對暗模式的期望

大多數使用者期望暗模式在裝置的作業系統設定中啟用後，應用和網站自動切換到暗模式。

使用者通常不太注意哪些設計不支援暗模式，並且不會因此放棄使用網站或應用。

暗模式設計中的常見問題

1. 圖形設計

在暗模式和亮模式下，圖形都應保持良好的可見性。如果影象的某些部分在暗背景上消失，或者非透明的背景被顯示出來，這就會影響美觀。使用SVG、WEBP或PNG格式可以更好地支援透明度，而非JPG。

問題示例：房屋影象在亮模式下表現良好，但在暗模式下，白色背景變得明顯，顯得粗糙

2. 覆蓋層與深度感

最常見的建立深度感的方法是使用陰影，尤其是在亮模式下。但在暗模式中，淺色陰影並不能很好地表現層疊效果，反而可能讓上層元素看起來像在發光。

最佳實踐：對於層疊的暗色元素，使用最深的顏色作為底層元素，最淺的顏色作為靠近使用者的上層元素。

iOS Duolingo 應用：在淺色模式下，模態框與背景螢幕清晰分離（左），但表示模態狀態的深灰色稀鬆布在深色模式下則不太明顯（右）。

iOS Google Keep 應用程式中勾勒出白卡輪廓的灰色細線足以將其與淺色模式下的白色背景分開（左）。在深色模式下，除了輪廓之外，卡片的淺灰色會產生卡片位於黑色背景之上的錯覺（右）。

3. 可讀性問題

過細的字型：在暗背景上容易消失，特別是對視力不佳的使用者。

過粗的字型：在暗背景上看起來會“滲入”背景。

顏色對比不足：字型和背景的對比度不足，尤其在暗模式下會使文字難以辨認。

解決方案：為標誌和文字新增描邊、光暈、陰影或漸變，確保在暗模式下清晰可見。

徽標中的文字2MOVERS 無法很好地轉換為深色模式（右），並且在電子郵件中變得難以辨認。

考慮將徽標的白色元素新增到深色元素，以確保其在深色背景上清晰可見。

4. 顏色對比

在暗背景上，高度飽和的顏色可見度差，不符合無障礙指南要求（WCAG要求普通文字的對比度最低為4.5:1）。

問題示例：在iOS Coinbase應用中，藍色UI元素與深灰色背景的對比度勉強符合WCAG標準（4.59:1），但視覺上仍難以分辨。

5. 渠道一致性

應用支援暗模式，但連結到的網頁可能是亮模式，導致體驗不一致。產品團隊可能在應用中大力支援暗模式，但使用者透過連結被引導到亮模式網頁時，這種不一致性會影響體驗。

iOS 版 TSA 原生應用程式（左）處於深色模式，幷包含許多指向其移動網站的連結；這些連結在瀏覽器中以淺色模式顯示（右）。

6. 頁面結構

頁面分隔符在暗模式下可能會消失，影響使用者對頁面佈局的理解。

最佳實踐：在暗模式下，不僅要使用分隔線，還可以透過顏色差異來區分頁面元素。

iOS 雅虎！ Fantasy 應用程式：不同的頁面元件（例如頂部的卡片、標題、列表元素）在淺色模式（左）中清晰界定，但在深色模式（右）中變得難以區分。

OS Trello 應用：除了線條和間距之外，頁面元素的淺灰色背景有助於在深色模式下將它們分開（右）。 （左側提供了燈光模式版本以供比較。

7. 浮動元件

浮動元件在暗模式下應與背景區分明顯。

iOS版National Geographic應用的浮動元件在暗模式下幾乎不可見，而iOS Lime應用的浮動按鈕在暗模式下更為突出。

8. 可掃描程式碼

某些掃描裝置無法處理反色的二維碼或條形碼。大多數裝置期望看到暗色前景與淺色背景的組合。

最佳實踐：在暗模式和亮模式下使用相同顏色的背景和前景，以確保程式碼始終可掃描。

這封電子郵件中的二維碼在深色模式下是反轉的（右）。這樣做會使程式碼無法用於某些二維碼掃描器，迫使使用者單擊連結並在瀏覽器中檢視它。

新增到 Apple Wallet 中的達美航空登機牌在淺色模式（左）和深色模式（右）的相同顏色背景上顯示二維碼。這種設計選擇在兩種情況下都保留了程式碼的可掃描性。

什麼情況下最適合設計暗模式？

支援暗模式在以下情況下尤為重要：

  1. Long sessions長時間使用：如新聞應用或電子書閱讀器，使用者長時間使用時，暗模式可減少眼睛疲勞和電池消耗。
  1. Frequent usage頻繁使用：如訊息類應用，使用者頻繁使用時，暗模式能降低視覺疲勞。
  1. Low-light conditions低光環境：如流媒體應用，使用者在黑暗環境中使用時，亮屏可能帶來不適，暗模式更合適。
  1. Little use of media少媒體內容：對於圖片和影片較少的應用，暗模式影響較小。

建議

  1. 自動適配系統設定：設計應預設與裝置的作業系統設定同步，使用者不應在每個應用中手動開啟暗模式。
  1. 測試暗模式：確保所有設計元素在暗模式下清晰可見，特別是透明背景影象和浮動元素。
  1. 檢查電子郵件的顯示效果：確保字型、標誌和影象在暗模式的郵件客戶端中顯示良好。